<template>
	<view class="quota-newcomer">
		<view class="quota-card-box">
			<view class="flex-between-center">
				<view class="fw-b">可用额度 (元)</view>
				<view class="flex-align-center">
					<view class="color-999">借还记录</view>
					<static-image src="/static/img/common/arrow-right.png" width="26" height="26" margin-left="4"></static-image>
				</view>
			</view>
			<view class="money-text">0.00</view>
		</view>
		<view class="font-s-18 fw-b">提额方式</view>
		<view class="newcomer-card-box">
			<view class="ljsq-btn flex-center">
				<static-image src="/pagesA/static/img/quota/ljsq-btn.png" width="144" height="32"></static-image>
			</view>
			<view class="flex-center mar-t-15" @click="agreement=!agreement">
				<static-image v-if="agreement" src="/static/img/common/agreement-active.png" width="32" height="32"></static-image>
				<static-image v-else src="/static/img/common/agreement-no.png" width="32" height="32"></static-image>
				<view class="mar-l-5 color-fff font-s-12">
					<text style="opacity: 0.72;">我已阅读并同意</text>
					<text class="" @click.stop="$common.navigator('/pagesA/setting/userAgreement')">《用户服务协议》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				agreement: false
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.quota-newcomer {
		background-image: url('../static/img/quota/newcomer-header-bg.png');
		background-size: 100% 560rpx;
		background-repeat: no-repeat;
		padding: 32rpx 24rpx;
		.quota-card-box{
			width: 702rpx;
			background: linear-gradient( 180deg, #E0F1FF 0%, #FFFFFF 160rpx);
			border: 4rpx solid #FFFFFF;
			background-color: #FFFFFF;
			border-radius: 24rpx;
			padding: 48rpx 24rpx 42rpx;
			margin-bottom: 48rpx;
			.money-text{
				font-size: 72rpx;
				font-weight: bold;
				letter-spacing: 4rpx;
				margin-top: 24rpx;
			}
		}
		.newcomer-card-box{
			background-image: url('../static/img/quota/newcomer-card-bg.png');
			background-size: 100% 100%;
			width: 100%;
			height: 544rpx;
			padding: 352rpx 24rpx 0;
			margin-top: 32rpx;
			.ljsq-btn{
				width: 100%;
				height: 96rpx;
				background: rgba(255,255,255,0.08);
				border-radius: 16rpx;
				border: 2rpx solid rgba(255,255,255,0.16);
				position: relative;
				&::after{
					content: '';
					background-image: url('~@/static/img/index/icon-click.png');
					background-size: 100% 100%;
					width: 140rpx;
					height: 140rpx;
					position: absolute;
					right: 120rpx;
					top: 10rpx;
					z-index: 1;
					pointer-events: none;
				}
			}
		}
	}
</style>
